
<template>
	<!-- 相册管理 -->
	<div class="album-query">
		<el-row :gutter="30">
			<el-col :span="6">
				<el-button type="text" style="font-size:0.18rem;color:#666666;" @click="back">相册管理</el-button>
				＞
				<span style="font-size:0.18rem;color:#333333;font-weight:bold;">三年级-二班</span>
			</el-col>
		</el-row>
		<div class="condition">
			<el-row class="one" :gutter="30">
				<el-col :span="3">
					<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==1?'color:#333333;font-weight:bold;':''"
					@click="selectPanel=1">按时间查看</el-button>
				</el-col>
				<el-col :span="3">
					<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==2?'color:#333333;font-weight:bold;':''"
					@click="selectPanel=2">按分类查看</el-button>
				</el-col>
				<el-col :span="3">
					<el-button type="text" style="width:100%;font-size:0.18rem;color:#666666;" :style="selectPanel==3?'color:#333333;font-weight:bold;':''"
					@click="selectPanel=3">按名字查看</el-button>
				</el-col>
			</el-row>
			<el-row class="two" v-if="selectPanel==1">
				<el-date-picker
					v-model="selectTime"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-row>
			<el-row class="two" v-else-if="selectPanel==2">
				<el-col :span="4">分类类型：</el-col>
				<el-col :span="20">
					<span class="photo_type" v-for="(row,index) in  albumTypeList"
					 :key="index" @click="searchParam.type=row">{{row}}</span>
				</el-col>
			</el-row>
			<el-row class="two" v-else-if="selectPanel==3">
				<el-col :span="4">学员：</el-col>
				<el-col :span="20">
					<span class="photo_student" v-for="(row,index) in  albumStudentList"
					 :key="index" @click="searchParam.studentId=row.studentId">{{row.studentName}}</span>
				</el-col>
			</el-row>
		</div>
		<el-row>
			<albumBoard v-for="(row,index) in albumList" :key="index"
			 :param="row"></albumBoard>
		</el-row>
	</div>
</template>

<script>
	import albumBoard from './album_board'

	let vm;
	export default{
		components:{albumBoard},
		data(){
			return {
				selectPanel:1,
				selectTime:'',
				albumTypeList:[],
				albumStudentList:[],
				searchParam:{
					campusId:this.$store.state.campusId,
					currPage:1,
					pageSize:10,
					total:0,
					schoolYearId:'',
					className:'',
					startTime:'',
					endTime:'',
					type:'',
					studentId:'',
				},
				albumList:[],
			}
		},
		methods:{
			init() {
				for(let i=0;i<5;i++){
					let plist=[];
					for(let j=0;j<10;j++){
						let url=j%2==0?'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575111874500&di=303cd0eb58018c291b2ddc6f3862d8c8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201401%2F07%2F20140107171234_3W2RC.jpeg':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575111874500&di=f32a2a5bf269a5006f25e4292bfebc15&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201310%2F16%2F224046ups8zp1jg31uz82g.jpg'
						plist.push({
							src:url,
							studentName:'cas'+j,
							teacherName:'asd'+j,
							createTime:'2019-05-0'+j,
						})
					}
					this.albumList.push({
						label:'测试'+i,
						count:10,
						photoList:plist
					})
				}


				this.search(1);
			},
			campusChange : function(campusId) { //校区改变
				this.searchParam.campusId=campusId;
				this.init();
			},
			/**搜索 */
			search(pgIndex){
				this.searchParam.currPage=pgIndex||this.searchParam.currPage;
				// api.teachPlanGetPage(this.searchParam)
				// .then(function(data){
				// 	if(data.resultCode==2000){
				// 		vm.searchParam.total=data.totalCount;
				// 		vm.albumList=data.list;

				// 		vm.albumList.forEach(ele=>{
				// 			ele._useTime=ele.planStartTime.substr(0,10)+' 至 '+
				// 			ele.planEndTime.substr(0,10);

				// 		});
				// 	}
				// });
			},
			pageSizeChange(val){
				this.searchParam.pageSize = val;
      			this.search(1);
			},
			curPageChange(val){
				this.search(val);
			},
			queryRow(item){

			},
			back(){
				this.$emit('back');
			},
		},
		mounted(){
			vm=this;
			// let userInfo = tool.getItem(lsKey.user, true); //得到当前用户信息
			// this.orgId=userInfo.orgId;
			this.init();
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.album-query{
		.condition{
			.two{
				height: 0.5rem;
    			padding: 0.05rem 0.33rem;
			}
			
		}
	}


	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>